<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>仿站电商平台</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
    <!-- 头部导航 -->
    <header class="header">
        <div class="container">
            <div class="header-content">
                <div class="logo">仿站电商平台</div>
                <div class="user-container" style="margin-left: auto;">
                    <!-- 未登录状态 -->
                    <div class="not-login" style="display: none;">
                        <span class="greeting">您好！</span>
                        <a href="login.html" class="login-link">请登录</a>
                    </div>
                    <!-- 登录状态 -->
                    <div class="logged-in" style="display: none; align-items: center;">
                        <span class="greeting" style="font-size: 16px; margin-right: 5px; display: inline-block;">您好！</span>
                        <span id="nickname" style="font-size: 16px; margin-right: 15px; display: inline-block; color: white;"></span>
                        <button onclick="location.href='./personal.html'" style="padding: 5px 15px; border: none; border-radius: 4px; background-color: white; color: #87CEEB; cursor: pointer; margin-right: 10px; font-size: 14px;">个人中心</button>
                        <button onclick="logout()" style="padding: 5px 15px; border: none; border-radius: 4px; background-color: white; color: #87CEEB; cursor: pointer; font-size: 14px;">退出登录</button>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main>
        <h1 class="main-title">
            <a href="./goods.html" style="color: inherit; text-decoration: none;">购买商品</a>
        </h1>
        
        <!-- 轮播图 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="../img/img1.jpg" alt="测试图1" class="banner-img">
                </div>
                <div class="swiper-slide">
                    <img src="../img/img2.jpg" alt="测试图2" class="banner-img">
                </div>
                <div class="swiper-slide">
                    <img src="../img/img3.jpg" alt="测试图3" class="banner-img">
                </div>
                <div class="swiper-slide">
                    <img src="../img/img4.jpg" alt="测试图4" class="banner-img">
                </div>
                <div class="swiper-slide">
                    <img src="../img/img5.jpg" alt="测试图5" class="banner-img">
                </div>
            </div>
            <!-- 分页器 -->
            <div class="swiper-pagination"></div>
            <!-- 导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </main>

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="../lib/axios.min.js"></script>
    <script src="../js/config.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/index.js"></script>
</body>
</html> 